<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Layui树形表格3.x演示</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/demo.css">
    <style>
        .demo-side {
            position: relative;
            transition: all .3s;
        }

        .demo-side.show {
            padding-left: 120px;
            position: relative;
        }

        .demo-side:before {
            content: "假设这是侧边栏, treeTable使用了与layui数据表格完全不同的列宽分配方式, 由浏览器来分配, 所以当容器宽度变化后会自动适应, 对单页面系统非常友好";
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -90px;
            width: 105px;
            visibility: hidden;
            line-height: 1.5;
        }

        .demo-side.show:before {
            visibility: visible;
        }
    </style>
</head>
<body class="layui-hide">
<div class="right-desc">
    <div class="layui-text desc-item">
        treeTable实现了layui数据表格的大部分功能，并且在用法上与几乎数据表格一致，
        支持懒加载、复选框联动(半选)、拖拽列宽、固定表头等功能，
        <a href="https://gitee.com/whvse/treetable-lay" target="_blank">码云下载</a>。
    </div>
    <div class="layui-text desc-item" style="padding: 0;overflow: hidden;">
        <img src="https://s2.ax1x.com/2019/08/23/msiO78.png" width="100%"/>
        <div style="padding: 5px 10px;">
            EasyWeb管理系统模板
            <a href="https://demo.easyweb.vip/iframe/" style="float: right;" target="_blank">前往查看</a>
        </div>
    </div>
</div>
<div class="page-wrapper">
    <blockquote class="layui-elem-quote" style="margin: 15px 0;">Layui树形表格3.x演示</blockquote>
    <div class="layui-btn-container" style="display: inline-block;">
        <a href="async.html" class="layui-btn layui-btn-sm layui-btn-normal">
            <i class="layui-icon">&#xe64d;</i>异步加载
        </a>
        <a href="icon.html" class="layui-btn layui-btn-sm layui-btn-normal">
            <i class="layui-icon">&#xe639;</i>自定义图标
        </a>
        <a href="edit.html" class="layui-btn layui-btn-sm layui-btn-normal">
            <i class="layui-icon">&#xe642;</i>单元格编辑
        </a>
        <a href="editAdv.html" class="layui-btn layui-btn-sm layui-btn-normal">
            <i class="layui-icon">&#xe642;</i>单元格编辑扩展
        </a>
        <a href="https://whvse.gitee.io/treetable/" class="layui-btn layui-btn-sm layui-btn-warm" target="_blank">
            bom表格
        </a>
        <button id="btnReload" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe666;</i>重载
        </button>
        <button id="btnRefresh" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe669;</i>刷新
        </button>
        <button id="btnGetChecked" class="layui-btn layui-btn-sm layui-btn-primary">获取选中</button>
        <button id="btnToggleSide" class="layui-btn layui-btn-sm layui-btn-primary">演示侧边栏</button>
    </div>
    <div class="layui-btn-container" style="display: inline-block;">
        <button id="btnExpandAll" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe668;</i>展开全部
        </button>
        <button id="btnFoldAll" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe66b;</i>折叠全部
        </button>
        <button id="btnExpand" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe625;</i>展开用户管理
        </button>
        <button id="btnFold" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe623;</i>折叠用户管理
        </button>
        <button id="btnChecked" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe605;</i>勾选添加用户
        </button>
    </div>
    <input class="layui-input" id="edtSearch" value="添加用户" placeholder="输入关键字"
           style="display: inline-block;width: 140px;height: 30px;line-height: 30px;padding: 0 5px;margin-right: 5px;"/>
    <div class="layui-btn-container" style="display: inline-block;">
        <button id="btnSearch" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe615;</i>搜索
        </button>
        <button id="btnClearSearch" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#x1006;</i>清除搜索
        </button>
    </div>
    <div class="demo-side">
        <table id="demoTreeTb"></table>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="tbBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="layui/layui.js"></script>
<script>
    layui.config({
        base: '../'
    }).use(['layer', 'util', 'treeTable'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var util = layui.util;
        var treeTable = layui.treeTable;
        $('body').removeClass('layui-hide');

        // 渲染表格
        var insTb = treeTable.render({
            elem: '#demoTreeTb',
            url: 'json/menus.json',
            toolbar: 'default',
            height: 'full-200',
            tree: {
                iconIndex: 2,
                isPidData: true,
                idName: 'authorityId',
                pidName: 'parentId'
            },
            defaultToolbar: ['filter', 'print', 'exports', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [
                [
                    {title: '只是想演示一个三级表头', colspan: 9},
                ],
                [
                    {title: '只是想演示一个多级表头', colspan: 4},
                    {field: 'menuUrl', title: '菜单地址', rowspan: 2},
                    {title: '这是一个二级表头', colspan: 4}
                ],
                [
                    {type: 'numbers'},
                    {type: 'checkbox'},
                    {field: 'authorityName', title: '菜单名称', minWidth: 165},
                    {
                        title: '菜单图标', align: 'center', hide: true,
                        templet: '<p><i class="layui-icon {{d.menuIcon}}"></i></p>'
                    },
                    {field: 'authority', title: '权限标识'},
                    {title: '类型', templet: '<p>{{d.isMenu?"菜单":"按钮"}}</p>', align: 'center', width: 60},
                    {
                        title: '创建时间', templet: function (d) {
                            return util.toDateString(d.createTime);
                        }
                    },
                    {align: 'center', toolbar: '#tbBar', title: '操作', width: 120}
                ]
            ],
            style: 'margin-top:0;'
        });

        // 工具列点击事件
        treeTable.on('tool(demoTreeTb)', function (obj) {
            var event = obj.event;
            if (event === 'del') {
                layer.msg('删除成功');
                obj.del();
            } else if (event === 'edit') {
                layer.msg('修改成功');
                obj.update({authorityName: '新的名称'});
            }
        });

        // 头部工具栏点击事件
        treeTable.on('toolbar(demoTreeTb)', function (obj) {
            switch (obj.event) {
                case 'add':
                    layer.msg('添加');
                    break;
                case 'delete':
                    layer.msg('删除');
                    break;
                case 'update':
                    layer.msg('编辑');
                    break;
                case 'LAYTABLE_TIPS':
                    layer.msg('提示');
                    break;
            }
        });

        // 全部展开
        $('#btnExpandAll').click(function () {
            insTb.expandAll();
        });

        // 全部折叠
        $('#btnFoldAll').click(function () {
            insTb.foldAll();
        });

        // 展开指定
        $('#btnExpand').click(function () {
            insTb.expand(2);
        });

        // 折叠指定
        $('#btnFold').click(function () {
            insTb.fold(2);
        });

        // 设置选中
        $('#btnChecked').click(function () {
            insTb.expand(4);
            insTb.setChecked([4]);
        });

        // 搜索
        $('#btnSearch').click(function () {
            var keywords = $('#edtSearch').val();
            if (keywords) {
                insTb.filterData(keywords);
            } else {
                insTb.clearFilter();
            }
        });

        // 清除搜索
        $('#btnClearSearch').click(function () {
            insTb.clearFilter();
        });

        // 重载
        $('#btnReload').click(function () {
            insTb.reload();
        });
        $('#btnRefresh').click(function () {
            insTb.refresh();
        });

        // 获取选中
        $('#btnGetChecked').click(function () {
            layer.alert('<pre>' + JSON.stringify(insTb.checkStatus().map(function (d) {
                return {
                    authorityName: d.authorityName,
                    authorityId: d.authorityId,
                    LAY_INDETERMINATE: d.LAY_INDETERMINATE
                };
            }), null, 3) + '</pre>');
        });

        // 演示侧边栏
        $('#btnToggleSide').click(function () {
            $('.demo-side').toggleClass('show');
        });

    });
</script>
</body>
</html>